@use 'utils/variables';
@use 'utils/mixins';

.modal .channel-invite__content,
.modal .user-groups-modal__content {
    .multi-select__container, .multi-select__error {
        height: auto;
        padding: 0 3.2rem;
    }

    .AlertBanner {
        margin: 1.2rem 3.2rem 0;

        button.btn {
            border-radius: 4px;
            font-weight: 600;
        }
    }

    .react-select__multi-value {
        border-radius: 50px;
    }

    .multi-select__help {
        padding: 8px 2.4rem 0;
    }

    .filtered-user-list {
        display: block;
        height: auto;
    }

    .react-select__multi-value__label {
        display: flex;
        align-items: center;
        padding: 4px;
        color: inherit;
        font-size: 14px;
        font-weight: 600;
    }

    .react-select__value__name {
        margin: 0 0 0 8px;
    }

    .react-select__multi-value__remove {
        margin-right: 4px;
    }

    .multi-select__wrapper {
        position: absolute;
        z-index: 5;
        overflow: auto;
        width: calc(100% - 48px);
        height: auto;
        max-height: 272px;
        padding: 12px 0;
        border-radius: 4px;
        margin: -10px 0 0 24px;
        box-shadow: var(--elevation-4);
    }

    .no-channel-message {
        padding: 1rem;
        font-size: 1.4rem;

        .primary-message {
            margin: 0;
            color: var(--center-channel-color);
            font-size: inherit;
            line-height: 28px;
        }
    }

    .react-select__value-container {
        padding: 0 16px;
        font-size: 16px;

        &.react-select__value-container--has-value {
            padding: 0 8px;
        }
    }

    .more-modal__list {
        height: auto;

        .more-modal__options {
            overflow: visible;
            min-height: auto;

            .group-name {
                font-size: 12px;
                line-height: 20px;
            }

            .more-modal__group-image {
                display: flex;
                width: 32px;
                min-width: 32px;
                height: 32px;
                align-items: center;
                justify-content: center;
                border-radius: 30px;
                background: rgba(var(--center-channel-color-rgb), 0.08);
            }

            .add-group-members {
                display: none;
                min-width: 110px;
                margin-left: auto;
                color: var(--button-bg);
                font-family: 'Open Sans';
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: 20px;
            }
        }
    }

    .react-select__control.react-select-auto {
        overflow: auto;
        min-height: 48px;
        max-height: 125px;
        padding: 3px 0;
    }

    .loading-screen {
        position: relative !important;
        padding: 1rem;
    }

    .more-modal__actions {
        display: none;
    }

    .more-modal__row {
        height: 40px;
        padding: 0 2.4rem;
        border: none;

        .more-modal__name {
            font-weight: 400;
        }
    }

    .more-modal__details {
        padding-left: 12px;
    }

    .add-others-link {
        color: var(--button-bg);
    }
}

.modal .channel-invite__content {
    display: flex;
    flex-direction: column;

    .modal-footer {
        order: 2;
    }

    .filtered-user-list {
        order: 0;
    }

    .invite-as-guest {
        margin-top: 8px;
        margin-right: 3.2rem;
        margin-left: auto;
    }

    .custom-no-options-message {
        padding: 12px 15px;
        font-size: 16px;
        line-height: 24px;

        button {
            padding: 0;
            margin-top: -3px;
            font-size: 16px;
        }
    }
}

body.app__body {
    .channel-invite,
    .user-groups-modal-create {
        .multi-select__wrapper {
            border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
            background: rgba(var(--center-channel-bg-rgb), 1);
        }
    }
}

body:not(.app__body) {
    .channel-invite,
    .user-groups-modal-create {
        .multi-select__wrapper {
            border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16);
            background: rgba(var(--sys-center-channel-bg-rgb), 1);
        }
    }
}
